<template>
  <div>
    <BasicTable
      title="列表"
      :columns="columns"
      :dataSource="list"
      :loading="loading"
      striped
      bordered
      showTableSetting
      :resizeHeightOffset="33"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <span class="">
            <a>权限设置</a>
            <a class="mx-2">编辑</a>
            <a>删除</a>
          </span>
        </template>
      </template>
      <template #toolbar>
        <!-- <a-button type="primary"> 新增用户 </a-button> -->
        <!-- <a-button type="primary"> 权限管理 </a-button> -->
      </template>
    </BasicTable>

    <div class="pt-6 pb-4 flex justify-end">
      <a-pagination
        v-model:current="pagination.current"
        v-model:page-size="pagination.size"
        :total="pagination.total"
        :show-total="(total) => `共 ${total} 条数据`"
        @change="fetch"
      />
    </div>
  </div>
</template>
  <script lang="ts">
import { defineComponent, ref } from 'vue';
import { BasicTable } from '/@/components/Table';
import { getCols, getRows } from './tableData';
import { defHttp } from '/@/utils/http/axios';

export default defineComponent({
  components: { BasicTable },
  setup() {
    const loading = ref(false);
    const pagination = ref({
      size: '10',
      total: 0,
      current: 1,
    });
    const list = ref([]);
    const total = ref(0);

    function fetch() {
      defHttp
        .get({
          url: '/Log/get-page',
          params: { pageIndex: pagination.value.current, pageSize: pagination.value.size },
        })
        .then((res) => {
          const { pageList, total } = res.data;
          pagination.value.total = total;
          list.value = pageList;
          // total.value = total;
        });
    }

    function changePage(val) {
      console.log(val);
    }

    fetch();

    return {
      columns: getCols(),
      data: getRows(),
      loading,
      pagination,
      list,
      total,
      changePage,
      fetch,
    };
  },
});
</script>
  